<form>
  <fieldset id="payment">
    <legend>{{ text_credit_card }}</legend>
    <div class="form-group row required">
      <label class="col-sm-2 col-form-label" for="input-cc-number">{{ entry_cc_owner }}</label>
      <div class="col-sm-10">
        <input type="text" name="cc_owner" value="" placeholder="{{ entry_cc_owner }}" id="input-cc-owner" class="form-control"/>
      </div>
    </div>
    <div class="form-group row required">
      <label class="col-sm-2 col-form-label" for="input-cc-type">{{ entry_cc_type }}</label>
      <div class="col-sm-10">
        <select name="cc_type" id="input-cc-type" class="form-control">

          {% for card in cards %}

            <option value="{{ card.value }}">{{ card.text }}</option>

          {% endfor %}

        </select>
      </div>
    </div>
    <div class="form-group row required">
      <label class="col-sm-2 col-form-label" for="input-cc-number">{{ entry_cc_number }}</label>
      <div class="col-sm-10">
        <input type="text" name="cc_number" value="" placeholder="{{ entry_cc_number }}" id="input-cc-number" class="form-control"/>
      </div>
    </div>
    <div class="form-group row required">
      <label class="col-sm-2 col-form-label" for="input-cc-start-date">{{ entry_cc_start_date }}</label>
      <div class="col-sm-3">
        <select name="cc_start_date_month" id="input-cc-start-date" class="form-control">

          {% for month in months %}

            <option value="{{ month.value }}">{{ month.text }}</option>

          {% endfor %}

        </select>
      </div>
      <div class="col-sm-3">
        <select name="cc_start_date_year" class="form-control">

          {% for year in year_valid %}

            <option value="{{ year.value }}">{{ year.text }}</option>

          {% endfor %}

        </select>
      </div>
    </div>
    <div class="form-group row required">
      <label class="col-sm-2 col-form-label" for="input-cc-expire-date">{{ entry_cc_expire_date }}</label>
      <div class="col-sm-3">
        <select name="cc_expire_date_month" id="input-cc-expire-date" class="form-control">

          {% for month in months %}

            <option value="{{ month.value }}">{{ month.text }}</option>

          {% endfor %}

        </select>
      </div>
      <div class="col-sm-3">
        <select name="cc_expire_date_year" class="form-control">

          {% for year in year_expire %}

            <option value="{{ year.value }}">{{ year.text }}</option>

          {% endfor %}

        </select>
      </div>
    </div>
    <div class="form-group row required">
      <label class="col-sm-2 col-form-label" for="input-cc-cvv2">{{ entry_cc_cvv2 }}</label>
      <div class="col-sm-10">
        <input type="text" name="cc_cvv2" value="" placeholder="{{ entry_cc_cvv2 }}" id="input-cc-cvv2" class="form-control"/>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="input-cc-issue">{{ entry_cc_issue }}</label>
      <div class="col-sm-10">
        <input type="text" name="cc_issue" value="" placeholder="{{ entry_cc_issue }}" id="input-cc-issue" class="form-control"/>
      </div>
    </div>
  </fieldset>
</form>
<div class="d-inline-block pt-2 pd-2 w-100">
  <div class="float-right">
    <button type="button" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_confirm }}</button>
  </div>
</div>
<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
	$.ajax({
		url: 'index.php?route=extension/payment/pp_payflow/send',
		type: 'post',
		data: $('#payment :input'),
		dataType: 'json',
		beforeSend: function() {
			$('#button-confirm').button('loading');
		},
		complete: function() {
			$('#button-confirm').button('reset');
		},
		success: function(json) {
			if (json['error']) {
				alert(json['error']);
			}

			if (json['success']) {
				location = json['success'];
			}
		}
	});
});
//--></script>